import React from 'react';
import { Row, Col } from 'antd';
import img from './bg3@2x.png'
import style from './index.module.css'
import microbitlogo from './microbit@2x.png'
import mike from './-s-mike.png'
import ather from './ather.png'
import book from './book.png'
import microbitfirst from './microbitfirst.png'
import creatBlue from './creat-blue@2x.png'
import program from './program-pink@2x.png'
import study from './study-yellow@2x.png'
import cart from './cart@2x.png'

export default () => {
  const back = {
    backgroundImage: `url(${img})`
  }
  return <div className={style.a2} style={back}  >
    <div className={`${style.banner}`} >
      <Row className={style.img5}>
        <Col span={15} className="page1">
          <img src={microbitlogo} alt="" />
          <br />
          <p>micro:bit是由英国广播电视公司（BBC）推出的专为青少年编程教育设计的可编程微型电脑,使学习与教学变得轻松有趣。</p>
        </Col>
        <Col span={9}>
          <div className="core" >
            <img className="core-img1" src={mike} alt="" />
            <div className="icon">
              <a href="https://shop42776662.m.youzan.com/wscgoods/detail/1yhov0byq1jfy">
                <img width="35" height="35" src={cart} alt="" />
              </a>
            </div>

            <br />
            <span>麦克纳姆轮全向战车</span>
          </div>
        </Col>
      </Row>
      <Row >
        <Col className="text-center" span={12}>
          <img src={microbitfirst} alt="" />
          <p>
            <img src={creatBlue} alt="" />
            <img src={study} alt="" />
            <img src={program} alt="" />
          </p>
        </Col>
        <Col span={6}>
          <div className="core">
            <img className="core-img2" src={book} alt="" />
            <div className="icon">
              <a href="https://shop42776662.m.youzan.com/wscgoods/detail/1yf7njgukwaq6">
                <img width="35" height="35" src={cart} alt="" />
              </a>
            </div>

            <br />
            <span>do your :bit配套教材</span>
          </div>
        </Col>
        <Col span={6}>
          <div className="core1">
            <span>了解更多</span>
            <div className="icon">
              <a href="https://shop253940311.taobao.com/?spm=a230r.7195193.1997079397.2.7e6c79bf0mcwc0">
                <img width="35" height="35" src={cart} alt="" />
              </a>
            </div>
          </div>
          <div className="core">
            <img className="core-img3" src={ather} alt="" />
            <div className="icon">
              <a href="https://item.taobao.com/item.htm?spm=a1z10.3-c-s.w4002-21501049694.84.3ae11aabtuxT3Y&id=607637973741">
                <img width="35" height="35" src={cart} alt="" />
              </a>
            </div>

            <br />
            <span>micro:bit编程套装</span>
          </div>

        </Col>
      </Row>
    </div>
  </div>
}